<template>
  <div class="app">
    <!-- 上半部分输入区域 -->
    <div class="input - section">
      <h1>待办事项</h1>
      <input v-model="newTask" placeholder="请填写任务" />
    </div>
    <!-- 中部列表区域 -->
    <div class="list - section">
      <ul>
        <li v-for="(task, index) in tasks" :key="index">
          <input type="radio" v-model="selectedTask" :value="task" />
          <span :class="{ completed: task.isCompleted }">{{ task.text }}</span>
        </li>
      </ul>
    </div>
    <!-- 下半部分任务状态区域 -->
    <div class="status - section">
      <p>共{{ uncompletedTasks.length }}条未完成任务</p>
      <button @click="filterTasks('all')">All</button>
      <button @click="filterTasks('active')">Active</button>
      <button @click="filterTasks('completed')">Completed</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 存储新任务的输入
const newTask = ref('');
// 存储待办事项列表
const tasks = ref([
  { text: '晨练', isCompleted: false },
  { text: '练书法', isCompleted: true }
]);
// 存储当前选中的任务
const selectedTask = ref(null);

// 计算未完成的任务列表
const uncompletedTasks = computed(() => tasks.value.filter(task =>!task.isCompleted));

// 过滤任务的方法
const filterTasks = (type) => {
  switch (type) {
    case 'all':
      return tasks.value;
    case 'active':
      return tasks.value.filter(task =>!task.isCompleted);
    case 'completed':
      return tasks.value.filter(task => task.isCompleted);
    default:
      return tasks.value;
  }
};
</script>

<style scoped>
.app {
  font-family: Arial, sans - serif;
}

.input-section {
  padding: 10px;
  text-align: center;
}

.input-section h1 {
  color: #800000;
}

.input-section input {
  padding: 8px;
  width: 300px;
}

.list-section {
  padding: 10px;
}

.list-section ul {
  list-style: none;
  padding: 0;
}

.list-section li {
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.list-section input {
  margin-right: 10px;
}

.list-section.completed {
  text-decoration: line - through;
}

.status-section {
  padding: 10px;
  text-align: center;
}

.status-section button {
  padding: 6px 12px;
  margin: 0 5px;
}
</style>